<template>
    <div class="inform">
         <!--按钮-->
        <div class="btns">
           <el-button size="small" type="primary" @click="toAdd">添加</el-button>
        </div>
    
    <!--表格-->
    <el-table :data="List" style="width: 100%" size="small">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="content" label="想法"> </el-table-column>
        <el-table-column prop="article_id" label="内容"> </el-table-column>
        <el-table-column prop="user_id" label="上传者id"> </el-table-column>
        <el-table-column label="操作" width="150" align="center"> 
        <template v-slot="scope">
          <el-button size="small" type="danger" @click="del(scope.row)">删除</el-button>
          <el-button size="small" type="primary" @click="edit(scope.row)">修改</el-button>
        </template>
      </el-table-column>
      </el-table>
      <!--模态框-->
      <el-dialog
      class="customer_modal"
      title="添加通知"
      :visible.sync="dialogVisible"
      width="60%">
       {{form}}
      <el-form :model="form" label-width="100px">
        <el-form-item label="想法" >
          <el-input v-model="form.content"></el-input>
        </el-form-item>
        <el-form-item label="内容" >
          <el-input v-model="form.article_id"></el-input>
        </el-form-item>
        <el-form-item label="上传者id" >
          <el-input v-model="form.user_id"></el-input>
        </el-form-item>
      </el-form>
      
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="save" size="small">确 定</el-button>
      </span>
    </el-dialog> 
    
    
    </div>
</template>
<script>
import {get, post} from '@/utils/request'
export default {
   data(){
       return {
           form:{},
           List:[],
           dialogVisible:false
       }
   } ,
   created(){
       this.loadData();
   },
   methods:{
       //保存
       save(){
           let url = "/inform/save"
           get(url,this.form).then((Response)=>{
               //1.模态框关闭
                this.dialogVisible = false;
               //2.提示
                this.$message({type:"success",message:Response.message})
               //3.刷新
                this.loadData();

           })
       },

       Update(){
           let url = "/inform/Update"
           post(url,this.form).then((Response)=>{
               //1.模态框关闭
                this.dialogVisible = false;
               //2.提示
                this.$message({type:"success",message:Response.message})
               //3.刷新
                this.loadData();

           })
       },
       
       //删除
       del(row){
           let url = "/inform/delete"
           get(url,{id:row.id}).then((Response)=>{
               //1、提示
               this.$message({type:"success",message:Response.message})
               //2.刷新
                this.loadData();
           })
       },
       //编辑
                edit(row){
                    this.form = row;
                    this.dialogVisible = true;
                },
       //加载数据
       loadData(){
           let url = "/inform/findAll";
           get(url).then((response)=>{
               //response是后端返回给我们的
               this.List = response.data;
           })
       },
       toAdd(){
            this.dialogVisible = true;
       }
   }    
}
</script>
<style scoped>

</style>
